import React, { useState } from "react";
import { ResultPage, Card } from "antd-mobile";
import styles from "./index.module.css";
import { Exchange } from "@react-vant/icons";
import { Input } from "antd-mobile";
import dayjs from "dayjs";
import {useNavigate} from "react-router-dom"
import { Button, Space, Popup ,CalendarPickerView } from "antd-mobile";
import { PictureOutline } from "antd-mobile-icons";
function Index() {
  const [visible1, setVisible1] = useState(false);
  const [startvalue, setStartValue] = useState("北京");
  const [endvalue, setEndValue] = useState("广州");
  const [date, setDate] = useState(dayjs().format("MM-DD"));
  const navigate=useNavigate()
  const handleToExchange = () => {
    const aa = startvalue;
    setStartValue(endvalue);
    setEndValue(aa);
  };
  //跳转列表页
  const handleTolist=()=>{
    navigate(`/list?start=${startvalue}&end=${endvalue}&date=${date}`)
  }
  return (
    <div>
      <ResultPage
        status=""
        title="火车票预订"
        description="便捷购票，服务你的每一次出行"
      >
        <Card>
          <div className={styles.homeCity}>
            <Input
              placeholder="请输入内容"
              value={startvalue}
              onChange={(val) => {
                setStartValue(val);
              }}
            />
            <Exchange
              className={styles.homeicon}
              onClick={() => handleToExchange()}
            />
            <Input
              placeholder="请输入内容"
              value={endvalue}
              onChange={(val) => {
                setEndValue(val);
              }}
            />
          </div>

          <div className={styles.homeTimer}>
            <p onClick={()=>setVisible1(true)}>{date}</p>
            <span>明天</span>
          </div>

          <Button
            block
            color="primary"
            size="large"
            className={styles.homeButton}
            onClick={()=>handleTolist()}
          >
            查询
          </Button>

          <div className={styles.homeText}>
            <Button
              size="mini"
              color="primary"
              fill="outline"
              style={{ fontSize: 10, marginRight: 30 }}
            >
              合肥-南京
            </Button>
            <span>清空</span>
          </div>
        </Card>

        <Card className={styles.card2}>
          <div className={styles.boxitem}>
            <div className={styles.homebox}>
              <p className={styles.homeIcon1}>
                <PictureOutline />
              </p>
              <span>12306账号</span>
            </div>
            <div className={styles.homebox}>
              <p className={styles.homeIcon1}>
                <PictureOutline />
              </p>
              <span>我的订单</span>
            </div>
            <div className={styles.homebox}>
              <p className={styles.homeIcon1}>
                <PictureOutline />
              </p>
              <span>帮助中心</span>
            </div>
          </div>
        </Card>

        <Popup
          visible={visible1}
          onMaskClick={() => {
            setVisible1(false);
          }}
          onClose={() => {
            setVisible1(false);
          }}
          
        >
          <CalendarPickerView onChange={(val)=>{
            setDate(dayjs(val).format("YYYY-MM-DD"))
            setVisible1(false)
          }}/>
        </Popup>
      </ResultPage>
    </div>
  );
}

export default Index;
